<template>
  <boss-view>
    <div slot="content" class="operateData">
      <!-- 地产 / 钢圈 / 产业园 -->
      <div class="col-2">
        <!-- 地产 -->
        <view-chart-item>
          <div slot="chartData">
            <main-title>
              <span slot="txt" class="txt">{{dcData.plateName}}</span>
            </main-title>
            <div class="top">
              <!-- 计划 / 完成 -->
              <div class="task">
                <div class="complete">
                  <!-- 当月 -->
                  <div class="sameMonth">
                    <p class="title">当月完成</p>
                    <div class="num">
                      <span>
                        {{parseInt(dcData.completedThisMonth)}}
                        <i
                          v-if="(Math.floor(dcData.completedThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                        >{{(Math.floor(dcData.completedThisMonth*100)/100).toString().substring((Math.floor(dcData.completedThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(dcData.completedThisMonth*100)/100).toString().length)}}</i>
                      </span>
                      万元
                    </div>
                  </div>
                  <!-- 同比 -->
                  <div class="contrast">
                    <p class="title">同比上月</p>
                    <div class="num">
                      {{parseInt(dcData.completedThisMonthRatio)}}
                      <span
                        v-if="(Math.floor(dcData.completedThisMonthRatio*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(dcData.completedThisMonthRatio*100)/100).toString().substring((Math.floor(dcData.completedThisMonthRatio*100)/100).toString().lastIndexOf("."),(Math.floor(dcData.completedThisMonthRatio*100)/100).toString().length)}}%</span>
                      <i :class="dcData.completedThisMonthRatio > 0 ? 'rise' : 'decline'"></i>
                      <!-- <i class="decline"></i> -->
                    </div>
                  </div>
                </div>
                <div class="plan">
                  <p class="title">当月计划</p>
                  <div class="num">
                    <span>
                      {{parseInt(dcData.planThisMonth)}}
                      <i
                        v-if="(Math.floor(dcData.planThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(dcData.planThisMonth*100)/100).toString().substring((Math.floor(dcData.planThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(dcData.planThisMonth*100)/100).toString().length)}}</i>
                    </span>
                    万元
                  </div>
                </div>
              </div>
              <!-- 达成率 -->
              <div class="completeRate">
                <p class="rate">
                  {{parseInt(dcData.completedRatioThisMonth)}}
                  <i
                    class="units"
                    v-if="(Math.floor(dcData.completedRatioThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                  >{{(Math.floor(dcData.completedRatioThisMonth*100)/100).toString().substring((Math.floor(dcData.completedRatioThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(dcData.completedRatioThisMonth*100)/100).toString().length)}}%</i>
                </p>
                <div class="schedule">
                  <i
                    v-if="dcData.completedRatioThisMonth < 100"
                    style="background-color:#48e5ff"
                    :style="{height: dcData.completedRatioThisMonth + '%'}"
                  ></i>
                  <i v-else style="height:100%;background-color:#28e787"></i>
                </div>
                <p class="tip">达成率</p>
              </div>
            </div>
            <pie-chart
              v-model="dcData.companyList"
              :option="borrowingOption"
              :chartStyle="'min-height:285px;'"
            ></pie-chart>
          </div>
        </view-chart-item>
        <!-- 钢圈 -->
        <view-chart-item>
          <div slot="chartData">
            <main-title>
              <span slot="txt" class="txt">钢圈</span>
            </main-title>
            <div class="top">
              <!-- 计划 / 完成 -->
              <div class="task">
                <div class="complete">
                  <!-- 当月 -->
                  <div class="sameMonth">
                    <p class="title">当月完成</p>
                    <div class="num">
                      <span>
                        {{parseInt(gqData.completedThisMonth)}}
                        <i
                          v-if="(Math.floor(gqData.completedThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                        >{{(Math.floor(gqData.completedThisMonth*100)/100).toString().substring((Math.floor(gqData.completedThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(gqData.completedThisMonth*100)/100).toString().length)}}</i>
                      </span>万元
                    </div>
                  </div>
                  <!-- 同比 -->
                  <div class="contrast">
                    <p class="title">同比上月</p>
                    <div class="num">
                      {{parseInt(gqData.completedThisMonthRatio)}}
                      <span
                        v-if="(Math.floor(gqData.completedThisMonthRatio*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(gqData.completedThisMonthRatio*100)/100).toString().substring((Math.floor(gqData.completedThisMonthRatio*100)/100).toString().lastIndexOf("."),(Math.floor(gqData.completedThisMonthRatio*100)/100).toString().length)}}%</span>
                      <!-- <i class="rise"></i> -->
                      <i :class="gqData.completedThisMonthRatio > 0 ? 'rise' : 'decline'"></i>
                    </div>
                  </div>
                </div>
                <div class="plan">
                  <p class="title">当月计划</p>
                  <div class="num">
                    <span>
                      {{parseInt(gqData.planThisMonth)}}
                      <i
                        v-if="(Math.floor(gqData.planThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(gqData.planThisMonth*100)/100).toString().substring((Math.floor(gqData.planThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(gqData.planThisMonth*100)/100).toString().length)}}</i>
                    </span>万元
                  </div>
                </div>
              </div>
              <!-- 达成率 -->
              <div class="completeRate">
                <p class="rate">
                  {{parseInt(gqData.completedRatioThisMonth)}}
                  <i
                    class="units"
                    v-if="(Math.floor(gqData.completedRatioThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                  >{{(Math.floor(gqData.completedRatioThisMonth*100)/100).toString().substring((Math.floor(gqData.completedRatioThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(gqData.completedRatioThisMonth*100)/100).toString().length)}}%</i>
                </p>
                <div class="schedule">
                  <i
                    v-if="gqData.completedRatioThisMonth < 100"
                    style="background-color:#48e5ff"
                    :style="{height: gqData.completedRatioThisMonth + '%'}"
                  ></i>
                  <i v-else style="height:100%;background-color:#28e787"></i>
                </div>
                <p class="tip">达成率</p>
              </div>
            </div>
            <pie-chart
              v-model="gqData.companyList"
              :option="borrowingOption"
              :chartStyle="'min-height:285px;'"
            ></pie-chart>
          </div>
        </view-chart-item>
        <!-- 产业园 -->
        <view-chart-item>
          <div slot="chartData">
            <main-title>
              <span slot="txt" class="txt">产业园</span>
            </main-title>
            <div class="top">
              <!-- 计划 / 完成 -->
              <div class="task">
                <div class="complete">
                  <!-- 当月 -->
                  <div class="sameMonth">
                    <p class="title">当月完成</p>
                    <div class="num">
                      <span>
                        {{parseInt(cyyData.completedThisMonth)}}
                        <i
                          v-if="(Math.floor(cyyData.completedThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                        >{{(Math.floor(cyyData.completedThisMonth*100)/100).toString().substring((Math.floor(cyyData.completedThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(cyyData.completedThisMonth*100)/100).toString().length)}}</i>
                      </span>万元
                    </div>
                  </div>
                  <!-- 同比 -->
                  <div class="contrast">
                    <p class="title">同比上月</p>
                    <div class="num">
                      {{parseInt(cyyData.completedThisMonthRatio)}}
                      <span
                        v-if="(Math.floor(cyyData.completedThisMonthRatio*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(cyyData.completedThisMonthRatio*100)/100).toString().substring((Math.floor(cyyData.completedThisMonthRatio*100)/100).toString().lastIndexOf("."),(Math.floor(cyyData.completedThisMonthRatio*100)/100).toString().length)}}%</span>
                      
                      <i :class="cyyData.completedThisMonthRatio > 0 ? 'rise' : 'decline'"></i>
                      <!-- <i class="decline"></i> -->
                    </div>
                  </div>
                </div>
                <div class="plan">
                  <p class="title">当月计划</p>
                  <div class="num">
                    <span>
                      {{parseInt(cyyData.planThisMonth)}}
                      <i
                        v-if="(Math.floor(cyyData.planThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(cyyData.planThisMonth*100)/100).toString().substring((Math.floor(cyyData.planThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(cyyData.planThisMonth*100)/100).toString().length)}}</i>
                    </span>万元
                  </div>
                </div>
              </div>
              <!-- 达成率 -->
              <div class="completeRate">
                <p class="rate">
                  {{parseInt(cyyData.completedRatioThisMonth)}}
                  <i
                    class="units"
                    v-if="(Math.floor(cyyData.completedRatioThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                  >{{(Math.floor(cyyData.completedRatioThisMonth*100)/100).toString().substring((Math.floor(cyyData.completedRatioThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(cyyData.completedRatioThisMonth*100)/100).toString().length)}}%</i>
                </p>
                <div class="schedule">
                  <i
                    v-if="cyyData.completedRatioThisMonth < 100"
                    style="background-color:#48e5ff"
                    :style="{height: cyyData.completedRatioThisMonth + '%'}"
                  ></i>
                  <i v-else style="height:100%;background-color:#28e787"></i>
                </div>
                <p class="tip">达成率</p>
              </div>
            </div>
            <pie-chart
              v-model="cyyData.companyList"
              :option="borrowingOption"
              :chartStyle="'min-height:285px;'"
            ></pie-chart>
          </div>
        </view-chart-item>
      </div>

      <!-- 房联行 / 金控 / 融媒 -->
      <div class="col-1">
        <!-- 房联行 -->
        <view-chart-item>
          <div slot="chartData">
            <main-title>
              <span slot="txt" class="txt">房联行</span>
            </main-title>
            <div class="top">
              <!-- 计划 / 完成 -->
              <div class="task">
                <div class="complete">
                  <!-- 当月 -->
                  <div class="sameMonth">
                    <p class="title">当月完成</p>
                    <div class="num">
                      <span>
                        {{parseInt(flhData.completedThisMonth)}}
                        <i
                          v-if="(Math.floor(flhData.completedThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                        >{{(Math.floor(flhData.completedThisMonth*100)/100).toString().substring((Math.floor(flhData.completedThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(flhData.completedThisMonth*100)/100).toString().length)}}</i>
                      </span>万元
                    </div>
                  </div>
                  <!-- 同比 -->
                  <div class="contrast">
                    <p class="title">同比上月</p>
                    <div class="num">
                      {{parseInt(flhData.completedThisMonthRatio)}}
                      <span
                        v-if="(Math.floor(flhData.completedThisMonthRatio*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(flhData.completedThisMonthRatio*100)/100).toString().substring((Math.floor(flhData.completedThisMonthRatio*100)/100).toString().lastIndexOf("."),(Math.floor(flhData.completedThisMonthRatio*100)/100).toString().length)}}%</span>

                      <!-- <i class="rise"></i> -->
                      <i :class="flhData.completedThisMonthRatio > 0 ? 'rise' : 'decline'"></i>
                    </div>
                  </div>
                </div>
                <div class="plan">
                  <p class="title">当月计划</p>
                  <div class="num">
                    <span>
                      {{parseInt(flhData.planThisMonth)}}
                      <i
                        v-if="(Math.floor(flhData.planThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(flhData.planThisMonth*100)/100).toString().substring((Math.floor(flhData.planThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(flhData.planThisMonth*100)/100).toString().length)}}</i>
                    </span>万元
                  </div>
                </div>
              </div>
              <!-- 达成率 -->
              <div class="completeRate">
                <p class="rate">
                  {{parseInt(flhData.completedRatioThisMonth)}}
                  <i
                    class="units"
                    v-if="(Math.floor(flhData.completedRatioThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                  >{{(Math.floor(flhData.completedRatioThisMonth*100)/100).toString().substring((Math.floor(flhData.completedRatioThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(flhData.completedRatioThisMonth*100)/100).toString().length)}}%</i>
                </p>
                <div class="schedule">
                  <i
                    v-if="flhData.completedRatioThisMonth < 100"
                    style="background-color:#48e5ff"
                    :style="{height: flhData.completedRatioThisMonth + '%'}"
                  ></i>
                  <i v-else style="height:100%;background-color:#28e787"></i>
                </div>
                <p class="tip">达成率</p>
              </div>
            </div>
          </div>
        </view-chart-item>
        <!-- 金控 -->
        <view-chart-item>
          <div slot="chartData">
            <main-title>
              <span slot="txt" class="txt">金控</span>
            </main-title>
            <div class="top">
              <!-- 计划 / 完成 -->
              <div class="task">
                <div class="complete">
                  <!-- 当月 -->
                  <div class="sameMonth">
                    <p class="title">当月完成</p>
                    <div class="num">
                      <span>
                        {{parseInt(tzData.completedThisMonth)}}
                        <i
                          v-if="(Math.floor(tzData.completedThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                        >{{(Math.floor(tzData.completedThisMonth*100)/100).toString().substring((Math.floor(tzData.completedThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(tzData.completedThisMonth*100)/100).toString().length)}}</i>
                      </span>万元
                    </div>
                  </div>
                  <!-- 同比 -->
                  <div class="contrast">
                    <p class="title">同比上月</p>
                    <div class="num">
                      {{parseInt(tzData.completedThisMonthRatio)}}
                      <span
                        v-if="(Math.floor(tzData.completedThisMonthRatio*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(tzData.completedThisMonthRatio*100)/100).toString().substring((Math.floor(tzData.completedThisMonthRatio*100)/100).toString().lastIndexOf("."),(Math.floor(tzData.completedThisMonthRatio*100)/100).toString().length)}}%</span>
                      
                      <i :class="tzData.completedThisMonthRatio > 0 ? 'rise' : 'decline'"></i>
                      <!-- <i class="decline"></i> -->
                    </div>
                  </div>
                </div>
                <div class="plan">
                  <p class="title">当月计划</p>
                  <div class="num">
                    <span>
                      {{parseInt(tzData.planThisMonth)}}
                      <i
                        v-if="(Math.floor(tzData.planThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(tzData.planThisMonth*100)/100).toString().substring((Math.floor(tzData.planThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(tzData.planThisMonth*100)/100).toString().length)}}</i>
                    </span>万元
                  </div>
                </div>
              </div>
              <!-- 达成率 -->
              <div class="completeRate">
                <p class="rate">
                  {{parseInt(tzData.completedRatioThisMonth)}}
                  <i
                    class="units"
                    v-if="(Math.floor(tzData.completedRatioThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                  >{{(Math.floor(tzData.completedRatioThisMonth*100)/100).toString().substring((Math.floor(tzData.completedRatioThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(tzData.completedRatioThisMonth*100)/100).toString().length)}}%</i>
                </p>
                <div class="schedule">
                  <i
                    v-if="tzData.completedRatioThisMonth < 100"
                    style="background-color:#48e5ff"
                    :style="{height: tzData.completedRatioThisMonth + '%'}"
                  ></i>
                  <i v-else style="height:100%;background-color:#28e787"></i>
                </div>
                <p class="tip">达成率</p>
              </div>
            </div>
          </div>
        </view-chart-item>
        <!-- 融媒 -->
        <view-chart-item>
          <div slot="chartData">
            <main-title>
              <span slot="txt" class="txt">融媒</span>
            </main-title>
            <div class="top">
              <!-- 计划 / 完成 -->
              <div class="task">
                <div class="complete">
                  <!-- 当月 -->
                  <div class="sameMonth">
                    <p class="title">当月完成</p>
                    <div class="num">
                      <span>
                        {{parseInt(rmData.completedThisMonth)}}
                        <i
                          v-if="(Math.floor(rmData.completedThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                        >{{(Math.floor(rmData.completedThisMonth*100)/100).toString().substring((Math.floor(rmData.completedThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(rmData.completedThisMonth*100)/100).toString().length)}}</i>
                      </span>万元
                    </div>
                  </div>
                  <!-- 同比 -->
                  <div class="contrast">
                    <p class="title">同比上月</p>
                    <div class="num">
                      {{parseInt(rmData.completedThisMonthRatio)}}
                      <span
                        v-if="(Math.floor(rmData.completedThisMonthRatio*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(rmData.completedThisMonthRatio*100)/100).toString().substring((Math.floor(rmData.completedThisMonthRatio*100)/100).toString().lastIndexOf("."),(Math.floor(rmData.completedThisMonthRatio*100)/100).toString().length)}}%</span>
                      
                      <i :class="rmData.completedThisMonthRatio > 0 ? 'rise' : 'decline'"></i>
                      <!-- <i class="decline"></i> -->
                    </div>
                  </div>
                </div>
                <div class="plan">
                  <p class="title">当月计划</p>
                  <div class="num">
                    <span>
                      {{parseInt(rmData.planThisMonth)}}
                      <i
                        v-if="(Math.floor(rmData.planThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(rmData.planThisMonth*100)/100).toString().substring((Math.floor(rmData.planThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(rmData.planThisMonth*100)/100).toString().length)}}</i>
                    </span>万元
                  </div>
                </div>
              </div>
              <!-- 达成率 -->
              <div class="completeRate">
                <p class="rate">
                  {{parseInt(rmData.completedRatioThisMonth)}}
                  <i
                    class="units"
                    v-if="(Math.floor(rmData.completedRatioThisMonth*100)/100).toString().lastIndexOf('.') >= 0"
                  >{{(Math.floor(rmData.completedRatioThisMonth*100)/100).toString().substring((Math.floor(rmData.completedRatioThisMonth*100)/100).toString().lastIndexOf("."),(Math.floor(rmData.completedRatioThisMonth*100)/100).toString().length)}}%</i>
                </p>
                <div class="schedule">
                  <i
                    v-if="rmData.completedRatioThisMonth < 100"
                    style="background-color:#48e5ff"
                    :style="{height: rmData.completedRatioThisMonth + '%'}"
                  ></i>
                  <i v-else style="height:100%;background-color:#28e787"></i>
                </div>
                <p class="tip">达成率</p>
              </div>
            </div>
          </div>
        </view-chart-item>
      </div>
    </div>
  </boss-view>
</template>

<script>
import viewChartItem from "@/components/bossVersion/viewChartItem";
import mainTitle from "@/components/bossVersion/mainTitle";
import bossView from "@/components/bossVersion/bossView";
import { GetFinancialSituationForGroup } from "@/api/finance/index";
export default {
  components: {
    viewChartItem,
    mainTitle,
    bossView
  },
  data() {
    return {
      flhData: {
        companyList: [],
        completedRatioThisMonth: 0,
        completedThisMonth: 0,
        completedThisMonthRatio: 0,
        planThisMonth: 0,
        plateId: "9001",
        plateName: "房联行"
      }, // 房联行
      dcData: {
        companyList: [],
        completedRatioThisMonth: 0,
        completedThisMonth: 0,
        completedThisMonthRatio: 0,
        planThisMonth: 0,
        plateId: "9002",
        plateName: "地产"
      }, // 地产
      gqData: {
        companyList: [],
        completedRatioThisMonth: 0,
        completedThisMonth: 0,
        completedThisMonthRatio: 0,
        planThisMonth: 0,
        plateId: "9004",
        plateName: "钢圈"
      }, // 钢圈
      cyyData: {
        companyList: [],
        completedRatioThisMonth: 0,
        completedThisMonth: 0,
        completedThisMonthRatio: 0,
        planThisMonth: 0,
        plateId: "9006",
        plateName: "产业园"
      }, // 产业园
      tzData: {
        companyList: [],
        completedRatioThisMonth: 0,
        completedThisMonth: 0,
        completedThisMonthRatio: 0,
        planThisMonth: 0,
        plateId: "9007",
        plateName: "投资"
      }, // 投资
      rmData: {
        companyList: [],
        completedRatioThisMonth: 0,
        completedThisMonth: 0,
        completedThisMonthRatio: 0,
        planThisMonth: 0,
        plateId: "9008",
        plateName: "融媒"
      }, // 融媒
      borrowingOption: {
        color: ["#28e787", "#f0bd26", "#48e5ff", "#FF7145", "#ff3e9a"],
        radius: ["55%", "70%"],
        center: ["35%", "50%"],
        // roseType: "radius",
        startAngle: 250,
        // formatter: function(value) {
        //   return (
        //     "{value|" + value.name + "}"
        //     // "{value|" + value.name + "}" + "\n" + "{large|" + value.value + "}"
        //   );
        // },
        hidePieMargin: true,
        showLine: false,
        showLabel: false,
        legend: {
          type: "scroll",
          orient: "vertical",
          top: 10,
          right: 40,
          show: true
        }
      }
    };
  },
  mounted() {
    this.fetchPageData();
  },
  methods: {
    // 获取营业收入数据、考核利润数据
    async fetchPageData() {
      try {
        var res = await GetFinancialSituationForGroup();
        if (res.data.code === "0") {
          var result = res.data.result;
          result.forEach(element => {
            switch (element.plateId) {
              case "9001": // 房联行
                this.$set(this, "flhData", element);
                break;
              case "9002": // 地产
                this.$set(this, "dcData", element);
                break;
              case "9004": // 钢圈
                this.$set(this, "gqData", element);
                break;
              case "9006": // 产业园
                this.$set(this, "cyyData", element);
                break;
              case "9007": // 投资
                this.$set(this, "tzData", element);
                break;
              case "9008": // 融媒
                this.$set(this, "rmData", element);
                break;
            }
          });
          debugger;
        }
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>


<style lang="scss" scoped>
@import "../../../../styles/bossVersion/_basics";

.operateData {
  @include absoluteAllSides(94, 20, 20, 140, 1);
  // 房联行 / 金控 / 融媒
  .col-1 {
    @include flexYcen;
    margin-top: 20px;
    & > .chartItem {
      width: 573px;
      height: 354px;
      line-height: 1;
      .top {
        @include flexXjsbYcen;
        margin-top: 22px;
        // 任务
        & > .task {
          padding: 30px 0 34px 20px;
          & > .complete {
            @include flexYend;
            color: $color3;
            // 当月
            & > .sameMonth {
              & > .title {
                font-size: 18px;
              }
              & > .num {
                margin-top: 8px;
                & > span {
                  margin-right: 5px;
                  @include din(46px);
                  & > i {
                    font-size: 24px;
                  }
                }
              }
            }
            // 同比
            & > .contrast {
              @include flexYbase;
              margin-bottom: 4px;
              margin-left: 20px;
              & > .title {
                font-size: 14px;
              }
              & > .num {
                @include flexYbase;
                margin-left: 8px;
                @include din(24px);
                & > span {
                  font-size: 16px;
                }
                & > .bossVersion {
                  margin-left: 3px;
                }
              }
            }
          }
          & > .plan {
            margin-top: 20px;
            color: $budget;
            & > .title {
              font-size: 18px;
            }
            & > .num {
              margin-top: 8px;
              & > span {
                margin-right: 5px;
                @include din(36px);
                & > i {
                  font-size: 20px;
                }
              }
            }
          }
        }
        // 达成率
        & > .completeRate {
          @include flexFdcXcen;
          padding-right: 40px;
          color: $color1;
          & > .rate {
            @include din(30px);
            & > .units {
              @include bold(18px);
            }
          }
          & > .schedule {
            position: relative;
            width: 34px;
            height: 152px;
            margin-top: 8px;
            margin-bottom: 8px;
            background-color: rgba(#000, 0.3);
            @include borderAll;
            border-color: rgba($color1, 0.3);
            overflow: hidden;
            & > i {
              @include absoluteBLSide(0, 0, 1);
              width: 100%;
              // background-color: $color1;
            }
          }
          & > .tip {
            font-size: 16px;
          }
        }
      }
    }
  }
  // 地产 / 钢圈 / 产业园
  .col-2 {
    @include flexYcen;
    & > .chartItem {
      width: 573px;
      height: 592px;
      line-height: 1;
      .top {
        @include flexXjsbYcen;
        margin-top: 12px;
        // 任务
        & > .task {
          padding: 26px 0 38px 22px;
          & > .complete {
            @include flexYend;
            color: $color3;
            // 当月
            & > .sameMonth {
              & > .title {
                font-size: 18px;
              }
              & > .num {
                margin-top: 8px;
                & > span {
                  margin-right: 5px;
                  @include din(46px);
                  & > i {
                    font-size: 24px;
                  }
                }
              }
            }
            // 同比
            & > .contrast {
              @include flexYbase;
              margin-bottom: 4px;
              margin-left: 20px;
              & > .title {
                font-size: 14px;
              }
              & > .num {
                @include flexYbase;
                margin-left: 8px;
                @include din(24px);
                & > span {
                  font-size: 16px;
                }
                & > .bossVersion {
                  margin-left: 3px;
                }
              }
            }
          }
          & > .plan {
            margin-top: 20px;
            color: $budget;
            & > .title {
              font-size: 18px;
            }
            & > .num {
              margin-top: 8px;
              & > span {
                margin-right: 5px;
                @include din(36px);
                & > i {
                  font-size: 20px;
                }
              }
            }
          }
        }
        // 达成率
        & > .completeRate {
          @include flexFdcXcen;
          padding-right: 34px;
          color: $color1;
          & > .rate {
            @include din(30px);
            & > .units {
              @include bold(18px);
            }
          }
          & > .schedule {
            position: relative;
            width: 34px;
            height: 152px;
            margin-top: 8px;
            margin-bottom: 8px;
            background-color: rgba(#000, 0.3);
            @include borderAll;
            border-color: rgba($color1, 0.3);
            overflow: hidden;
            & > i {
              @include absoluteBLSide(0, 0, 1);
              width: 100%;
              background-color: $color1;
            }
          }
          & > .tip {
            font-size: 16px;
          }
        }
      }
      .chart {
        margin-top: 40px;
      }
    }
  }
}
</style>